<template>
  <li>
    <div class="title">
      {{ node.name }}
      <span v-if="hasChildren" @click="isOpen = !isOpen">[{{ isOpen ? "-" : "+" }}]</span>
    </div>

    <ul v-if="hasChildren && isOpen">
      <!-- 有子级的话，就需要使用 node.children 再次渲染 li 
        直接调用自己本身，就是递归组件
        PS: 组件的模板中要调用自身，必须给组件设置一个 name 选项
      -->
      <Item v-for="(data, index) in node.children" :key="index" :node="data" />
    </ul>
  </li>
</template>

<script>
export default {
  /**
   * 1. 给 Vue Devtools 显示组件的名字
   * 2. 给 keep-alive 组件配置使用
   * 3. 组件递归使用时
   */
  name: "Item",

  props: {
    /**
     * 结构：{
     *    name: '',
     *    children: [], // 可能有
     * }
     */
    node: Object,
  },

  data() {
    return {
      // 表示是否展开当前节点的子节点
      isOpen: false,
    };
  },

  computed: {
    // 是否有子级
    hasChildren() {
      return this.node.children && this.node.children.length;
    },
  },
};
</script>
